<template>
  <div>
    <div>
      <el-button type="success" @click="openAddDialog()">
        新增保修
        <el-icon>
          <Plus />
        </el-icon>
      </el-button>
    </div>
    <el-table :data="tableData" style="width: 100%" :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ 'text-align': 'center' }" @selection-change="handleSelectionChange">
      <!-- <el-table-column type="selection"  width="55"/> -->
      <el-table-column prop="id" label="Id" width="100" fit />
      <el-table-column prop="dormitoryId" label="宿舍号" width="100" fit />
      <el-table-column prop="repairText" label="故障处" fit />
      <el-table-column prop="createTime" label="上报时间" width="300" fit />
      <el-table-column prop="createBy" label="上报者" width="100" fit />
      <el-table-column prop="flag" label="是否完成" fit>
        <template #default="scope">
          <span v-if="scope.row.flag == 0">未完成</span>
          <span v-if="scope.row.flag != 0">完成</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button v-show="!showButton" link type="primary" size="small" @click="openUpdateDialog(scope.row)">
            修改
          </el-button>
          <el-button v-show="!showButton" link type="primary" size="small" @click="handleClick(scope.row)"
            :disabled="isButtonDisabled">
            完成
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="example-pagination-block">
      <el-pagination layout="prev, pager, next" @current-change="handelCurrentChange" :total="total" />
    </div>
    <div>
      <Add :get-dialog="addDialog" @close="close()"></Add>
      <Update :get-dialog="updateDialog" :get-info="tableInfo" @close="close()"></Update>
    </div>
  </div>
</template>

<script>

import { Plus, Position, Close } from "@element-plus/icons";
import Add from "@/components/guarantee/add";
import Update from "@/components/guarantee/update";
import axios from "axios";
import { ElMessage } from "element-plus";
import { toRaw } from '@vue/reactivity'


export default {
  name: "table",
  components: {
    Update,
    Add,
    Plus, Position, Close
  },
  props: {
    search: {
      type: Object,
      required: true
    }
  },
  watch: {
    'search.dormitoryId': {
      handler(val) {
        this.form.dormitoryId = val
        this.getDormitory(this.form)
      },
      deep: true
    }
  },
  data() {
    return {
      isButtonDisabled: false,
      showButton: false,
      addDialog: false,
      updateDialog: false,
      form: {
        dormitoryId: null,
        start: 0,
        end: 10
      },
      total: 0,
      tableData: [],
      tableInfo: {},
      ids: []
    }
  },
  methods: {
    getDormitoryAll() {
      let data = {
        start: 0,
        end: 1000
      }
      axios({
        url: `http://localhost:8888/dormitory/repair/list`,
        method: "post",
        data: data
      }).then((res) => {
        this.total = res.data.length
      })
    },
    getDormitory(data) {
      const user = JSON.parse(localStorage.getItem("user"))
      if (user.roleId == 3) {
        data.userId = user.id
      }
      axios({
        url: `http://localhost:8888/dormitory/repair/list`,
        method: "post",
        data: data
      }).then((res) => {
        this.tableData = res.data
      })
    },
    handelCurrentChange() {
      let data = this.form
      data.start = (value - 1) * 10
      this.getDormitory(data)
    },
    handleClick(data) {
      console.log(data)
      axios({
        url: "http://localhost:8888/dormitory/repair/delete",
        method: "put",
        data: data
      }).then(res => {
        if (res) {
          ElMessage({
            message: "报修完成!",
            type: "success"
          })
          // if (data.flag != 0) {
          //   this.isButtonDisabled = true
          // }else{
          //   this.isButtonDisabled = false
          // }
        } else {
          ElMessage({
            message: "报修失败!",
            type: "danger"
          })
        }
      })
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    openAddDialog() {
      this.addDialog = true
    },
    openUpdateDialog(data) {
      if (data.flag == 0) {
        if (data == null) {
          ElMessage({
            message: "请选择单个修改的内容",
            type: "warning"
          })
        } else {
          this.tableInfo = data
          this.updateDialog = true
        }
      } else {
        ElMessage({
          message: "已完成报修，请勿修改!",
          type: "warning"
        })
      }
    },
    close(value) {
      this.addDialog = value
      this.updateDialog = value
    }
  },
  mounted() {
    this.getDormitory(this.form)
    this.getDormitoryAll()
    const user = JSON.parse(localStorage.getItem("user"))
    if (user.roleId == 3) {
      this.showButton = true
    }
  }
}
</script>

<style scoped>
::v-deep .example-pagination-block {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  margin-right: 20px;
  margin-bottom: 16px;
}

::v-deep .example-demonstration {
  margin-bottom: 16px;
}
</style>